<!--
 * @Descripttion: 文件说明
 * @version: 0.0.1
 * @Author: gaojiapeng
 * @Date: 2021-02-18 07:58:07
 * @LastEditors: gaojiapeng
 * @LastEditTime: 2021-04-13 16:50:24
-->
<template>
  <div class="messageList" >
    <div id="chartATZ" style="height: 100%;width: 40%;float: left"></div>
    <div style="height: 50%;width: 1px;float: left;border: 1px solid darkgrey;position: relative;top: 25%"></div>
    <div id="chartTZRight" style="height: 100%;width: 54%;float: left;"></div>
  </div>
</template>
<script>
import { GetDlpOee,GetDlpreal_time_status} from "@/api";
import icon from "./image/icon_andon.png";
import * as echarts from 'echarts';
export default {
  data() {
    return {
      icon,
      value: 0,
      MyChart: null,
      MyChar1t: null,
      timerTZStatus: null,
    };
  },
  mounted() {
    this.getChart()
    this.getChart1()
    this.timerTZStatus = setInterval(() => {
      this.getChart()
      this.getChart1()
    }, window.config.HomeReloadTime);
  },
  methods: {
    getChart() {
      GetDlpreal_time_status("51042670978854912").then(res => {
        let SCStatusValue=0
        let TJStatusValue=0
        let DKStatusValue=0
        let LXStatusValue=0
        for(let key in res.data.data){
          if(res.data.data[key][0]===1){
            SCStatusValue=SCStatusValue+1
          }else if(res.data.data[key][0]===0){
            TJStatusValue=TJStatusValue+1
          }else if(res.data.data[key][0]===3){
            DKStatusValue=DKStatusValue+1
          }else if(res.data.data[key][0]===2){
            LXStatusValue=LXStatusValue+1
          }
        }
        const ChartValue= [
          { value: SCStatusValue, name: "加工" },
          { value: TJStatusValue, name: "停机" },
          { value: DKStatusValue, name: "断开" },
          { value: LXStatusValue, name: "离线" }
        ]
        var chartDom = document.getElementById('chartATZ');
        var myChart = echarts.init(chartDom);
        var option = {
          title: {
            text: "",
            subtext: "",
            x: "center",
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          legend: {
            show:false,
            orient: "vertical",
            left: "left",
            data: ["加工", "停机", "断开", "离线"],
          },
          series: [
            {
              name: "",
              type: "pie",
              radius: "55%",
              center: ["50%", "50%"],
              data: ChartValue,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };
        myChart.setOption(option);
      });
    },
    //周设备开动率
    getChart1() {
      const DataArr = this.getDays(); //获取日期集合
      const PostData={
        "deviceTreeReqVO": {
          "deviceIds": [],
          "level": 2,
          "schemeId": "51042670978854912"
        },
        "endDate": DataArr.endTime,
        "endHour": "",
        "startDate": DataArr.startTime,
        "startHour": "",
        "type": 1
      }
      GetDlpOee(PostData).then(res => {
        var chartDom1 = document.getElementById('chartTZRight');
        var myChart1 = echarts.init(chartDom1);
        const ChartData=res.data.data.oeeAPCReportsResVOS
        //数据
        const XName = [];
        const data1 = [];
        const img = [
          "image://",
          "image://",
          "image://",
          "image://",
        ];
        const data = [
          {
            coords: [
            ],
          },
        ];
        for (let i=0;i<ChartData.length;i++){
          const dateNew = ChartData[i].date.split('-')[1]+'/'+ChartData[i].date.split('-')[2]
          XName.push(dateNew)
          data1.push((ChartData[i].timeRate*100))
          data[0].coords.push([dateNew,(ChartData[i].timeRate*100)])
        }
        var option = {
          grid: {
            left: "15%",
            top: "20%",
            bottom: "20%",
            right: "5%",
          },
          title: {
            text: "设备开动率",
            textStyle: {
              align: "center",
              color: "#fff",
              fontSize: 15,
            },
            top: "5%",
            left: "center",
          },
          legend: {
            type: "scroll",
            data: "来电量",
            itemWidth: 18,
            itemHeight: 12,
            textStyle: {
              color: "#00ffff",
              fontSize: 14,
            },
          },
          yAxis: [
            {
              type: "value",
              position: "left",
              nameTextStyle: {
                color: "#00FFFF",
              },
              splitLine: {
                lineStyle: {
                  type: "dashed",
                  color: "rgba(135,140,147,0.8)",
                },
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                formatter: "{value}%",
                color: "#fff",
                fontSize: 14,
              },
            },
          ],
          xAxis: [
            {
              type: "category",
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: "#0696f9",
                },
              },
              axisLabel: {
                inside: false,
                textStyle: {
                  color: "#fff", // x轴颜色
                  fontWeight: "normal",
                  fontSize: "14",
                  lineHeight: 22,
                },
              },
              data: XName,
            },
          ],
          series: [
            {
              symbolSize: 150,
              symbol: img[2],
              name: "小灯光",
              type: "line",
              data: data1,
              itemStyle: {
                normal: {
                  borderWidth: 5,
                  color: "#0696f9",
                },
              },
            },
            {
              name: "滑行的光点",
              type: "lines",
              coordinateSystem: "cartesian2d",
              symbolSize: 30,
              polyline: true,
              effect: {
                show: true,
                trailLength: 0,
                period: 10, //光点滑动速度
                symbolSize: 150,
                symbol: img[0],
              },
              lineStyle: {
                normal: {
                  width: 1,
                  opacity: 0.6,
                  curveness: 0.2,
                },
              },
              data: data,
            },
          ],
        };
        myChart1.setOption(option);
      });

    },
    // 获取当前日期的前7天
    getDays(){
      let oneDay = 24 * 60 * 60 * 1000
      let endTime = new Date(Date.now())
      endTime = this.formatterDate(endTime,"yyyy-MM-dd")
      let startTime = new Date(Date.now() - 6*oneDay)
      startTime  = this.formatterDate(startTime,"yyyy-MM-dd")
      const days = {
        startTime,
        endTime
      }
      return days
    },
    //时间格式化
    formatterDate(date,fmt){
      let nowDate = {
        yyyy: date.getFullYear(), // 年
        MM: date.getMonth() + 1, // 月份
        dd: date.getDate(), //日
        hh:date.getHours(),
        mm:date.getMinutes(),
        ss:date.getSeconds()
      }
      if(/(y+)/.test(fmt)){
        fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
      }
      for(var k in nowDate){
        if(new RegExp("("+ k +")").test(fmt)){
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (nowDate[k]) : (("00"+ nowDate[k]).substr((""+ nowDate[k]).length)));
        }
      }
      return fmt;
    },
  },
  destroyed() {
    // 清理定时器
    clearTimeout(this.timerTZStatus)
    this.timerTZStatus = null
    clearInterval(this.timerTZStatus)
  }
};
</script>
<style lang="scss" scoped>
.messageList {
  height: 100%;
  width: 100%;
  display: flex;
  .left {
    flex: 0.4;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .right {
    flex: 0.6;
    .top {
      height: 50%;
      display: flex;
      align-items: flex-end;
      .value {
        font-size: 4rem;
        color: #f97f01;
        font-family: numberFont;
      }
      .unit {
        margin-left: 10px;
        font-size: 1.6rem;
        color: #bbbbbb;
      }
    }
    .bottom {
      height: 50%;
      font-size: 1.6rem;
      color: #a8adbf;
      line-height: 30px;
      display: flex;
      align-items: flex-start;
    }
  }
}
</style>
